<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<base href="<%=request.getContextPath()%>/" />
<head>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/ui.jqgrid.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>
</head>
<body>
	<table id="groupTree" class="border: 0px none;"></table>
	<script type="text/javascript">
		$(document)
				.ready(

						function($) {
							$('#groupTree')
									.jqGrid(
											{
												"url" : "user/findgroup.json",
												"colModel" : [ {
													"name" : "nodeid",
													"index" : "nodeid",
													"sorttype" : "int",
													"key" : true,
													"hidden" : true,
													"width" : 50
												}, {
													"name" : "name",
													"index" : "name",
													"sorttype" : "string",
													"label" : "Name",
													"width" : 170
												}, {
													"name" : "state",
													"hidden" : true
												} ],

												"width" : "300",
												"hoverrows" : false,
												"viewrecords" : false,
												"gridview" : true,
												"height" : "auto",
												"sortname" : "lft",
												"loadonce" : false,
												"mtype" : "POST",
												"rowNum" : 100,
												"scrollrows" : true,
												// enable tree grid
												"treeGrid" : true,
												// which column is expandable
												"ExpandColumn" : "name",
												// datatype
												"treedatatype" : "json",
												// the model used
												"treeGridModel" : "nested",
												// configuration of the data comming from server
												"treeReader" : {
													"left_field" : "lft",
													"right_field" : "rgt",
													"level_field" : "level",
													"leaf_field" : "isLeaf",
													"expanded_field" : "expanded",
													"loaded" : "loaded",
													"icon_field" : "icon"
												},
												"onSelectRow" : function(rowid) {
													if (rowid) {
														var rdata = $(
																'#groupTree')
																.jqGrid(
																		'getRowData',
																		rowid);
														if (rdata.isLeaf === 'true') {
															alert(rdata.name);
															alert(rdata.nodeid)
															$("#userGrid")
																	.jqGrid(
																			'setGridParam',
																			{
																				"url" : "user/finduserlist.json",
																				postData : {
																					"nodeid" : rdata.nodeid
																				},
																			})
																	.trigger(
																			"reloadGrid");
														}
													}
												},
												"sortorder" : "asc",
												"datatype" : "json",
											});
							// bind keyss
							$("#groupTree").jqGrid('bindKeys');
							// hide header
							$('.ui-jqgrid-htable', '.ui-jqgrid-hbox').hide();

						});
	</script>
	<div>
		<table id="userGrid"></table>
		<div id="userGridPager"></div>
	</div>
	<script type="text/javascript">
		$(document).ready(
				function() {
					$("#userGrid").jqGrid({
						url : 'user/finduserlist.json',
						// we set the changes to be made at client side using predefined word clientArray
						editurl : 'clientArray',
						mtype : "GET",
						datatype : "json",
						colModel : [ {
							label : '用户ID',
							name : 'userid',
							width : 75,
							key : true,
							editable : true,
							editrules : {
								required : true
							}
						}, {
							label : '用户名',
							name : 'username',
							width : 140,
							editable : true
						// must set editable to true if you want to make the field editable
						}, {
							label : '昵称',
							name : 'nickname',
							width : 100,
							editable : true
						}, {
							label : '登陆次数',
							name : 'times',
							width : 80,
							editable : true
						}, {
							label : '当前状态',
							name : 'state',
							width : 140,
							editable : true
						}, {
							label : '创建时间',
							name : 'cretime',
							width : 140,
							editable : true
						} ],
						sortname : 'userid',
						jsonReader : {
							root : "rows", // json中代表实际模型数据的入口
							page : "page", // json中代表当前页码的数据
							total : "total", // json中代表页码总数的数据
							records : "records", // json中代表数据行总数的数据
							repeatitems : true, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素（即可以json中元素可以不按顺序）；而所使用的name是来自于colModel中的name设定。
							cell : "cell",
							id : "id",
							userdata : "userdata",
							subgrid : {
								root : "rows",
								repeatitems : true,
								cell : "cell"
							}
						},
						sortorder : 'asc',
						loadonce : false,
						viewrecords : true,
						width : 780,
						height : 200,
						rowNum : 10,
						rowList : [ 10, 20, 30 ],
						regional : 'cn',
						emptyrecords : '没有记录被查询到！',
						pager : "#userGridPager",

					});

					$('#userGrid').navGrid(
							'#userGridPager',
							// the buttons to appear on the toolbar of the grid
							{
								add : true,
								edit : true,
								del : true,
								search : false,
								refresh : false,
								view : false,
								position : "left",
								cloneToTop : false
							},
							// options for the Edit Dialog
							{
								editCaption : "编辑对话框",
								recreateForm : true,
								checkOnUpdate : true,
								checkOnSubmit : true,
								closeAfterEdit : true,
								afterSubmit : function(data, postdata, oper) {

									alert("afterSubmit");
									var response = data.responseJSON;
									if (response.hasOwnProperty("error")) {
										if (response.error.length) {
											return [ false, response.error ];
										}
									}
									return [ true, "", "" ];
								},
								errorTextFormat : function(data) {
									return 'Error: ' + data.responseText
								}
							},
							// options for the Add Dialog
							{
								url : "user/setuserlist.json",
								height : 'auto',
								width : 620,
								closeAfterAdd : true,
								recreateForm : true,
								clearAfterAdd : true,
								closeAfterEdit : true,
								reloadAfterSubmit : true,
								afterSubmit : function(response, postdata) {
									var json = response.responseText;
									alert(json);
									alert(postdata.userid);
									jQuery("#jqGrid").jqGrid('addRowData',
											postdata.userid, postdata);
									/* 	jQuery("#jqGrid").jqGrid('addRowData',postdata.userid, {
											state : "<font color='red'>Row 13 is updated!</font>"
										}); */
									/* 				
									var response = response.responseJSON;
									if (response.hasOwnProperty("error")) {
									if (response.error.length) {
									return [ false, response.error ];
									}
									}  */

									return [ true, json, postdata.userid ];
									/* 		return [ success, message, new_id ];

											var json = response.responseText; //format is {status:"success/error",msg:""} 
											var result = eval("(" + json + ")"), successs = false;
											if ("success" == result.status) {
												successs = true;
												$("#FormError td").html(result.msg);
												$("#FormError").show();
											}
											return [ successs, result.msg, "" ]; */
								},
								errorTextFormat : function(data) {
									return 'Error: ' + data.responseText
								}
							},
							// options for the Delete Dailog
							{
								errorTextFormat : function(data) {
									return 'Error: ' + data.responseText
								}
							});
					$("#testtest").click(
							function() {
								alert($('#groupTree').jqGrid('getGridParam',
										'selrow'));
							});
				});
	</script>
	<p>
		<input id="testtest" value="测试" type="button">
	</p>
	<div id="content"></div>
</body>
</html>